{% extends "base.html" %}
{% block title %}Create new exam {% endblock %}
{% block content %}
    <div id="page-wrap">
        <h2>Create new exam</h2>
        <p>Here you can create a new exam for your students. You can select how many questions you want and how many options you want for each questions.
        </p>
        <form action="{% url Exams.views.create %}" method="post" >
            <fieldset id="form_exam">
                <legend>&nbsp;&nbsp;Exam&nbsp;&nbsp;</legend>
                <label for="title">Exam title:</label>
                <input type="text" name="title" id="title"/><br />

                <label for="deadline">Deadline:</label>
                <input type="text" readonly="readonly" name="deadline" id="deadline" /><br />

                <label for="description">Description:</label><br />
                <textarea name="description" id="description" rows="20" cols="20"></textarea>

                <label for="enabled"></label>
                Enabled:<input type="checkbox" checked="checked" name="enabled" id="enabled" value="1"  class="styled" />
                <div id="submit_area">
                    <a href="javascript:saveExamFormWS();" id="btnSave">Submit Form</a>
                    <p id="message"></p>
                </div>
            </fieldset>
            <div id="form_questions">
                <div>
                    <h2>Questions and Answers</h2>
                </div>
                <fieldset class="question" >
                    <legend>&nbsp;&nbsp;Question 1&nbsp;&nbsp;</legend>
                    <input type="text" name="question_1" id="question_1" maxlength="120" />
                    <div id="options_q1">
                        Answer 1:
                        <input type="text" name="q1_o1" id="q1_o1" maxlength="120" />
                        <input type="radio" checked="checked" name="q1" id="q1_r1" value="1" class="styled" /><br />
                        Answer 2:
                        <input type="text" name="q1_o2" id="q1_o2" maxlength="120" />
                        <input type="radio" name="q1" id="q1_r2" value="2" class="styled"/><br />
                    </div>
                    <div class="option_add">
                        <a href="javascript:return false;" class="add_option" id="add_option_q1">Add new option</a>
                        <input type="hidden" id="question_1_option_count" value="2" />
                    </div>
                </fieldset>

                <fieldset class="question" >
                    <legend>&nbsp;&nbsp;Question 2&nbsp;&nbsp;</legend>
                    <input type="text" name="question_2" id="question_2" maxlength="120" />
                    <div id="options_q2">
                        Answer 1:
                        <input type="text" name="q2_o1" id="q2_o1" maxlength="120" />
                        <input type="radio" checked="checked" name="q2" id="q2_r1" value="1" class="styled" /><br />
                        Answer 2:
                        <input type="text" name="q2_o2" id="q2_o2" maxlength="120" />
                        <input type="radio" name="q2" id="q2_r2" value="2" class="styled"/><br />
                    </div>
                    <div class="option_add">
                        <a href="javascript:return false;" class="add_option" id="add_option_q2">Add new option</a>
                        <input type="hidden" id="question_2_option_count" value="2" />
                    </div>
                </fieldset>
            </div>
            <div id="question_add">
                <a href="javascript:return false;" id="add_question">Add new question to form</a>&nbsp;&nbsp;
            </div>
            <input type="hidden" id="question_count" value="2" />
        </form>
    </div>
    <!-- Javascript Template for the saved drawings data from an ajax webservice call -->
    <script id="new_question_tmpl" type="text/x-jquery-tmpl">
        <fieldset class="question" >
            <legend>&nbsp;&nbsp;Question ${question_id}&nbsp;&nbsp;</legend>
            <input type="text" name="question_${question_id}" id="question_${question_id}" maxlength="120" />
            <div id="options_q${question_id}">
                Answer 1:
                <input type="text" name="q${question_id}_o1" id="q${question_id}_o1" maxlength="120" />
                <input type="radio" checked="checked" name="q2" id="q${question_id}_r1" value="1" class="styled" /><br />
                Answer 2:
                <input type="text" name="q${question_id}_o2" id="q${question_id}_o2" maxlength="120" />
                <input type="radio" name="q${question_id}" id="q${question_id}_r2" value="2" class="styled"/><br />
            </div>
            <div class="option_add">
                <a href="javascript:return false;" class="add_option" id="add_option_q${question_id}">Add new option</a>
                <input type="hidden" id="question_${question_id}_option_count" value="2" />
            </div>
        </fieldset>
    </script>

    <script id="new_option_tmpl" type="text/x-jquery-tmpl">
        Answer ${option_id}:
        <input type="text" name="q${question_id}_o${option_id}" id="q${question_id}_o${option_id}" maxlength="120" />
        <input type="radio" name="q${question_id}" id="q${question_id}_r${option_id}" value="${option_id}" class="styled" /><br />
    </script>

    <script id="create_result_tmpl" type="text/x-jquery-tmpl">
        <div>
            <h2>Your new Exam is now ready</h2>
            <p>Result from server:${success}</p>
        </div>
    </script>
{% endblock %}